
<template>
  <div class="page">
    <div class="header-card">
      <div class="people-info" @click="goMyCenter">
        <div>
          <img src="@/assets/images/pic.png" alt="" />
        </div>
        <div>
          <p>{{ info.userName }}</p>
          <span>{{ info.phone }}</span>
        </div>
        <van-icon class="icon-img" name="arrow" />
      </div>
      <div class="gross">
        <span>总佣金收入</span>
        <p>{{ info.totalBrokerage }}</p>
      </div>
      <div class="month-data">
        <div>
          <span>本月收入</span>
          <p>{{ info.currMonthBrokerage }}</p>
        </div>
        <div>
          <span>上月收入</span>
          <p>{{ info.lastMonthBrokerage }}</p>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">
        <p>
          <span
            :class="index == actIndex ? 'act' : ''"
            v-for="(item, index) in date"
            :key="index"
            @click="getData(item, index)"
            >{{ item.title }}</span
          >
        </p>
        <div @click="getAllOrder">全部订单 <van-icon name="arrow" /></div>
      </div>
      <div class="card">
        <div>
          <span>佣金收入</span>
          <p>{{ currentData.brokerage }}</p>
        </div>
        <i></i>
        <div>
          <span>订单量</span>
          <p>{{ currentData.orderNum }}</p>
        </div>
      </div>
      <div class="list">
        <p>订单列表</p>
        <!-- <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        > -->
          <ul>
            <li v-for="item in list" :key="item.id">
              <h3>{{ item.tcName }}</h3>
              <div>
                <label>订单号：</label>
                <span>{{ item.orderNo }}</span>
              </div>
              <div>
                <label>手机号：</label>
                <span>{{ item.ordeDn }}</span>
              </div>
              <div>{{item.orderTime}}</div>
              <span>佣金{{ item.unitBrokerage }}</span>
            </li>
          </ul>
        <!-- </van-list> -->
      </div>
    </div>
  </div>
</template>
<script>
import { getHomeData, getChanageHomeData, getUserInfo } from './service/service.js'
export default {
  name: 'PersonalHome',
  data () {
    return {
      actIndex: 0,
      info: {
        userName: '',
        phone: '',
        // headPic:''
        totalBrokerage: '',
        currMonthBrokerage: '',
        lastMonthBrokerage: ''
      },

      currentData: {
        brokerage: '',
        orderNum: ''
      },
      date: [
        { title: '今日', id: 1 },
        { title: '7日', id: 2 },
        { title: '30日', id: 3 }
      ],

      // loading: false,
      // finished: false,
      list: []
    }
  },
  created () {
    getUserInfo()
      .then((res) => {
        const data = res.data
        if (data.ret !== 0) {
          this.$toast(data.msg)
          return false
        }
        this.loginInfo = data.data // loginSrc 0:客户端发起 1：其它登录
        this.$store.commit('personal/getLoginInfo', this.loginInfo)
      })
      .catch((err) => {
        console.log(err)
      })
    getHomeData()
      .then((res) => {
        const data = res.data
        if (data.ret !== 0) {
          this.$toast(data.msg)
          return false
        }
        this.info = data.data
      })
      .catch((err) => {
        console.log(err)
      })
    this.init()
  },
  methods: {
    init () {
      getChanageHomeData({ type: (this.actIndex + 1) })
        .then((res) => {
          const data = res.data
          if (data.ret !== 0) {
            this.$toast(data.msg)
            return false
          }
          this.currentData.brokerage = data.data.brokerage
          this.currentData.orderNum = data.data.orderNum
          this.list = data.data.orderList
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getData (val, index) {
      this.actIndex = index
      this.list = []
      this.currentData.brokerage = ''
      this.currentData.orderNum = ''
      this.init()
    },
    goMyCenter () {
      this.$router.push({ path: '/personal/myCenter', query: { userName: this.info.userName, phone: this.info.phone } })
    },
    getAllOrder () {
      this.$router.push({ path: '/personal/orderView' })
    }
    // onLoad () {
    //   // 异步更新数据
    //   // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    //   setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //       this.list.push(this.list.length + 1)
    //     }

    //     // 加载状态结束
    //     this.loading = false

    //     // 数据全部加载完成
    //     if (this.list.length >= 40) {
    //       this.finished = true
    //     }
    //   }, 1000)
    // }
  }
}
</script>

<style lang="less" scoped>
.page {
  background: #fff;
}
.header-card {
  padding: 26px 15px;
  background: url("../../assets/images/img_bg.png") no-repeat left top / 100%
    100%;
  .people-info {
    background: #ffffff;
    box-shadow: 0px 0px 4px 2px rgba(35, 129, 241, 0.1);
    border-radius: 8px;
    padding: 14px 20px;
    box-sizing: border-box;
    position: relative;
    display: flex;
    > div:first-child {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      text-align: center;
      margin-right: 15px;
      img {
        width: 100%;
      }
    }
    > div:nth-child(2) {
      p {
        color: #333330;
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 2px;
      }
      span {
        font-size: 12px;
        color: #a5b5c9;
      }
    }
    .icon-img {
      position: absolute;
      top: 28px;
      right: 20px;
    }
  }
  .gross {
    margin-top: 24px;
    span {
      font-size: 13px;
      color: #afd4ff;
    }
    p {
      font-size: 30px;
      font-family: DINAlternate-Bold, DINAlternate;
      font-weight: bold;
      color: #ffffff;
      margin-top: 5px;
    }
  }
  .month-data {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 13px;
      color: #afd4ff;
    }
    p {
      font-size: 20px;
      font-family: DINAlternate-Bold, DINAlternate;
      font-weight: bold;
      color: #ffffff;
      margin-top: 5px;
    }
  }
}
.content {
  margin-top: 20px;
  padding: 0 15px;
  .title {
    display: flex;
    justify-content: space-between;
    > p {
      background: #f2f3f5;
      border-radius: 4px;
      padding: 7px 0;
      span {
        width: 59px;
        display: inline-block;
        text-align: center;
        font-size: 14px;
        font-weight: 700;
        color: #999999;
        cursor: pointer;
      }
      span:nth-child(2) {
        border-left: 1px solid #dedcdc;
        border-right: 1px solid #dedcdc;
      }
      .act {
        color: #2381f1;
      }
    }
    > div:last-child {
      line-height: 34px;
      color: #2381f1;
      cursor: pointer;
    }
  }
  .card {
    // width: 345px;
    // height: 86px;
    margin-top: 18px;
    background: #ffffff;
    border-radius: 5px;
    border: 1px solid #dddddd;
    padding: 14px 0;
    display: flex;
    justify-content: space-around;
    div {
      width: 50%;
      text-align: center;
      span {
        font-size: 13px;
        color: #999999;
      }
      p {
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        color: #333;
        margin-top: 8px;
      }
    }
    i {
      width: 1px;
      height: 30px;
      border: 1px solid #efefef;
      margin-top: 12px;
    }
  }
  .list {
    margin-top: 20px;
    > p {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 15px;
    }
    li {
      border-top: 1px solid #ebedf0;
      padding: 12px 0;
      position: relative;
      h3 {
        font-size: 15px;
      }
      div {
        margin-top: 5px;
        font-size: 12px;
        color: #999;
        // label {
        // }
        // span {
        // }
      }
      > span {
        font-size: 14px;
        color: #ff6565;
        position: absolute;
        top: 48px;
        right: 0;
      }
    }
  }
}
</style>
